/*
 * @Description: 树形下拉选中只能选择末级，绑定选项的value
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-07-22 17:27:02
 * @LastEditTime: 2022-08-08 09:49:24
 * @FilePath: \cscec-pms-admin\src\views\subcontractors\components\PartialTreeSelect.js
 */

export default {
  name: 'PartialTreeSelect',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    // 树
    treeData: {
      type: Array,
      default: () => []
    },
    // 自定义字段
    replaceFields: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          title: 'title',
          key: 'key',
          label: 'id',
          value: 'value'
        }
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    // 转换绑定的选中数据，与v-model同步(这个地方直接绑定选项名的汉字)
    currentValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    },
  },
  render() {
    const { treeData, replaceFields } = this.$props
    const deepTree = (list) => {
      return list.map(el => {
        if (Array.isArray(el[replaceFields.children]) && el[replaceFields.children].length > 0) {
          return (
            <a-tree-select-node
              key={el[replaceFields.key]}
              value={el[replaceFields.value]}
              title={el[replaceFields.title]}
              disabled
            >
              {deepTree(el[replaceFields.children])}
            </a-tree-select-node>
          )
        } else {
          el.scopedSlots = { title: 'title' }
          return (
            <a-tree-select-node
              key={el[replaceFields.key]}
              value={el[replaceFields.value]}
              disabled={el[replaceFields.disabled]}
            >
              <span slot="title">{el[replaceFields.title]}</span>
            </a-tree-select-node>
          )
        }

      })
    }
    return (
      <a-tree-select
        multiple
        placeholder="请选择"
        props={{ ...this.$attrs }}
        v-model={this.currentValue}
        style="width:100%"
      >
        {deepTree(treeData)}
      </a-tree-select>
    )
  }
}
